08. Visual Studio Code 使用教程
介绍
Visual Studio Code 是一款轻量且强大的代码编辑器，支持 Windows，OS X 和 Linux。它采用经典的 VS 的 UI 布局，功能强大，扩展性很强。 内置 JavaScript、TypeScript和 Node.js 支持，而且拥有丰富的插件生态系统，可通过安装插件来支持C++、C#、Python、PHP等其他语言。
下载安装
我们可以点击 此处 打开 VS code 官方网站，网站会根据你的系统提供对应的下载链接，点击下载按钮之后就可以下载符合你系统的安装包。
上面分别是 Mac 和 Windows 系统下打开网页的情况。下载之后解压下载的安装包，Mac 下直接将文件拖到 Applications(应用程序) 里就可以安装了，Windows 下双击
.exe
文件进行安装即可。
Windows用户注意：
Windows系统在安装 VS code 过程中可能会看到下面这一个画面，这里会默认勾选
添加到PATH （重启后生效）这里将 VS code 添加到 PATH 可以帮助我们之后可以在命令行中启动 VS code 或者直接使用命令打开项目文件，所以这里请不要去除这个勾选，这对之后会有用处。
安装完成之后我们双击图标打开 VS code。
关于启动：
这里关于启动 VS code 我们还有另外一种方式，那就是通过命令行的方式进行启动，这里因为系统的原因 Mac 和 Windows 会略有不同。
- Mac
如果你希望可以直接在终端输入
code打开运行 VS code, VS code 中有一条命令 "Shell Command: Install 'code' command in PATH"可以将code添加到$PATH中，这样我们就可以在终端中使用 code 来启动 VS code 了。这里我们需要打开 VS code ，在当前焦点是 VS code 情况下按下
cmd+p键打开命令面板，然后输入Shell 命令，此时命令面板将会搜索并且在下方显示匹配的命令，找到Shell 命令: 在PATH中安装“code”这条命令后回车就可以了。
- Windows
注意：VS code 要求 .NET Framework 4.5 已经安装，如果你使用的是 Windows7 系统，请确保 .NET Framework 4.5 已经安装。如果没有安装的，可以点击 此处下载
如果你在之前的安装过程中没有去掉勾选的
添加到PATH （重启后生效）这个条件，这表示你在安装的时候已经将 VS code 添加到了 %PATH% 环境变量里面，此时你就可以在控制到任意路径下输入code来打开 VS code 或者编辑该文件夹下面的文件。
基本布局
VS Code 有一个简单直观的布局，它提供最大化的编辑空间，同时留下足够空间来浏览和访问你的文件夹或项目全部上下文。它的用户界面分为五个方面：
- 编辑器：来编辑你的文件。你可以同时打开三个的编辑。
- 侧边框：包含不同的视图。在你的项目工作的时候，视图像资源管理器来帮助你。
- 状态栏：显示打开的项目和编辑的文件的相关信息。
- 视图栏：位于最左边的视图栏，可以让你在视图之间切换并给你更多的特定于上下文指示
- 面板：在编辑区下面有不同的面板，面板有输入或调试信息，错误和警告或一个集成终端。
- 当你每次打开VS Code，它跟你上次关闭它时的状态一样。文件夹，布局，打开的文件都被保存。
关于欢迎界面
- 左侧
打开 VS code 之后我们可以看到一个欢迎界面。通过
欢迎使用界面其实我们就可以看到很多的信息。首先我们查看左边的三个小面板。在这个界面中我们可以在
开始面板部分看到我们可以点击新建文件来直接新建一个文件，也可以通过打开文件夹来打开一个已经存在的项目文件。如果你之前已经打开过一些项目文件，在最近面板将会有你近期内打开过的文件记录，可以直接点击相关的记录重新打开文件。欢迎界面左侧最下面是帮助面板，这里给新手提供了各方面的帮助文档和信息，对于 VS code 新手来说，可以先通过这里了解一下 VS code 的基本使用。
- 右侧
欢迎界面右侧主要有两个部分，这两个部分分别是 自定义 和 学习 ；这是两个非常实用和重要的部分。
我们在自定义面板中可以自己定义 工具和语言 。这里因为 VS code 子身是一个极为简单的编辑器，他自身并不支持很多语言环境（后面我们会有介绍），所以这里我们可以点击
工具和语言来安装你需要的语言和工具,这里我们以 Python 为例子进行演示。接着我们可以看到我们可以在 VS code 中安装其他编辑器的键盘快捷方式，这个对于之前用过其他编辑器并且有其他编辑器实用习惯的人来说简直不要太开心，如果你之前是VIM 、 Atom 、Sublime 的用户，现在都可以在 VS code 上面安装对应的键盘快捷方式，不需要重新学习另外一套快捷键方式。
接着可以看到的是颜色主题，这里 VS code 提供了一些内置的主题可供选择，你也可以通过扩展安装其他第三方的主题（稍后会讲）。
了解命令面板
与其他编辑器一样，VS code 也有命令面板。我们可以通过键盘操作命令面板，通过命令面板，我们可以访问 VS code 所有的功能，包含快捷键的一些常见操作。
Mac 用户可以通过快捷键
cmd+p
，Windows 用户可以通过
ctrl+p
调出命令面板。我们可以在命令面板输入框里面输入各种命令进行操作，例如我们可以在其中输入一个项目中的文件名，它将导航并且打开这个文件。
这里我们可以使用
cmd+o
(Mac) 或者
ctrl+o
(Windows) 来打开一个项目文件，然后在命令面板输入框中搜索需要打开的文件。
当然，命令面板的功能不仅仅有这些，它还可以定位到具体的符号、显示并且运行命令和管理拓展等等功能，这里可以通过在命令面板输入框中输入
?
查看可以用的命令列表。
基本设置
VS code 还提供了一些可自定义的设置。这些设置可以让我们更为全面的定制编辑器。在 Mac 下我们可以点击菜单栏
code
>>
首选项
>>
设置
打开我们的设置面板。
Windows 用户可以点击
文件
>>
首选项
>>
设置
打开设置页面。
打开设置页面大家可以看到，VS code 提供了非常详细的设置页面，左边为默认设置，右边为用户设置，对于编辑器、工作台或者各类插件拓展都有很详细的设置。VS code 的设置很详细，首先会有各个大的分类，点开之后是每一个小的设置项目，每一个都有中文注释讲解如何设置，设置的每一个值的作用。如果你想更改某一个设置，只需要将更改的任何设置复制到右侧的用户设置里面并且保存就可以了。
这里给大家演示一个例子：更改
editor.lineNumbers
属性，也就是是否显示行号属性，这里编辑器默认是显示的。
从上面的演示可以看到，在没有更改
行号
属性之前，我们在文件中是可以看到每行的前面的行号数字的，然后复制
行号
属性对应的语句，复制粘贴到用户设置里面，并且将
on
改为
off
，保存之后我们打开之前的文件，可以看到已经不再显示行号了，这里我们就完成了一次编辑器属性的设置。根据这个演示，大家可以在设置页面完成自己的定制化设置。
打开、编辑、保存文件
根据上面的教程你已经可以进行主题更换、编辑习惯设置等等从大到小的一系列设置。VS code 作为一款编辑器，其主要的功能还是打开和编辑文件，接下来我们就来了解一下。
打开文件
和其他相同类型的编辑器一样，VS code 也有很多种打开文件的方式。首先我们可以从菜单栏点击
文件
>>
打开
选择我们需要打开的项目文件，当然你也可以直接把文件拖到 VS code 页面直接打开或者你还可以使用快捷键
cmd+o
打开：
以上是 Mac 下面的演示，Windows 这里同样可以点击
文件
>>
打开文件
选择对应的文件打开，以及可以使用快捷键
ctrl+o
或者直接将文件拖入 VS code 中打开等方式。
如果你想同时打开多个项目文件，只需要在选择文件时按住
cmd
(Mac)或者
ctrl
(Windows)键多选即可。
另外一种打开的方式就是使用命令行。在上面的关于启动中我们已经了解如何在命令行中启动 VS code 编辑器，那么对于如何在命令行中打开文件就比较简单了，但是首先你需要先根据之前的教程实现可以命令行启动编辑器，不然是无法进行打开文件这一步的。当你已经可以在命令行中启动编辑器时，只需要在
code
命令后面加上一个或者多个文件路径作为参数去运行
code
命令。这对于从终端打开一个文件来说非常有用，只需要运行 code [files] 就可以了。
这里演示为 Mac 环境下，Windows 终端中也是直接使用 code [file] 打开就可以了。
编辑和保存文件
你可以非常简单地编辑一个文件，你只需要用鼠标点击一个位置，然后用键盘输入内容即可，VS code 没有特殊的命令或快捷键来进入「编辑模式」。
你可以用菜单栏的 文件 >> 保存 或快捷键
cmd+s
(Mac)`ctrl+s
(Windows) 来保存文件，或者你可以用 文件 >> 另存为 或
cmd+shift+s
(Mac)\
ctrl+shift+s`(Windows) 将文件另存为到另一个路径。这里就不做演示了。